<template>
  <div>
    <HeaderSelector></HeaderSelector>
    <div class="mcontaner">
      <el-card class="box-card" v-for="url in urls" @click.native="toDetail(url.url)">
        <el-row>
          <el-col span="3">
            <div class="demo-image">
              <div class="block">
                <el-image
                    style="height: 80px; width: 80px"
                    :src="url.img"
                    :fit="contain"></el-image>
              </div>
            </div>
          </el-col>

          <el-col span="12">

            <h4>{{ url.name }}</h4>
            <p>
              {{ url.description }}
            </p>
          </el-col>

        </el-row>
      </el-card>


      <el-pagination class="mpage"
                     background
                     layout="prev, pager, next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="total"
                     @current-change=page>
      </el-pagination>
    </div>

  </div>
</template>

<script>
import HeaderSelector from "../components/HeaderSelector";

export default {
  name: "HotWebs",
  components: {HeaderSelector},

  data() {
    return {


      fits: ['contain'],
      imgurl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',


      urls: [],


      currentPage: 1,
      currentPage_s: 1,
      total: 0,
      pageSize: 6,
    }
  },

  methods: {
    page(currentPage) {
      const _this = this
      _this.$axios.get("/showUrl?currentPage=" + currentPage).then(res => {
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.urls = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
      })
    },

    toDetail(url) {
      window.open(url)
    }
  },

  created() {
    //钩子函数 初始化就赋值为1
    this.page(1)
  }
}
</script>

<style scoped>
.mcontaner {
  position: relative;
  top: 50px
}

.demo-image {
  position: relative;
  top: 10px;

}

h4 {
  color: #00B7FF;
}

p {
  font-size: small;
  font-weight: bold;
}
</style>